<template>
  <h1>hengban页</h1>
  <h1>{{ $route.params }}</h1>
  <router-link to="/news/123">法1：去id为123的新闻页</router-link>
  <br />
  <button @click="goNewsPush">页面跳转$router.push</button>
  <br />
  <!-- 不能回退 -->
  <button @click="goNewsReplace">页面替换$router.replace</button>
  <br />
  <button @click="$router.go(1)">前进1页</button>
  <br />
  <button @click="$router.go(-1)">后退1页</button>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(this.$route);
  },
  methods: {
    goNewsPush() {
      // 1.直接跳转
      // this.$router.push("/news/123")
      // this.$router.push({ path: "/news/1234" });

      // 2.带参数跳转
      // this.$router.push({
      //   name: "newsPage",
      //   params: {
      //     nid: 1234,
      //   },
      // });

      // 3.带查询的跳转
      this.$router.push({
        path: "/",
        query: { search: "拜登", time: "20220808" },
      });
      // http://localhost:3000/#/?search=拜登&time=20220808
    },
    goNewsReplace() {
      this.$router.replace({
        path: "/",
        query: { search: "拜登", time: "20220808" },
      });
    },
  },
};
</script>
